<template>
	<view class="">
		<view v-if="tabArr.length>1 && !isCoverview" :class="isFixed?'flex alignCenter justConAround tabChange fixTop':'flex alignCenter justConAround tabChange'">
			<view :class="activeTabIndex==index?'font18 bold activeTab tabOne':'font14 tabOne'" v-for="(item,index) in tabArr" :key="index" @click="changeTab(index,item)">
				{{item.title}}
				<text class="redDot font10" v-if="item.num>0">{{item.num>99?'99+':item.num}}</text>
			</view>
		</view>
		<!-- <view v-if="tabArr.length==1" :class="isFixed?'flex alignCenter tabChange fixTop':'flex alignCenter tabChange'">
			<view :class="activeTabIndex==index?'font16 bold activeTab':'font14'" v-for="(item,index) in tabArr" :key="index" @click="changeTab(index,item)">{{item.title}}</view>
		</view> -->
		<view class="tabChange" v-if="isFixed && !isCoverview">
			<view class="empty"></view>
		</view>
		
		<!-- cover-view布局 -->
		<cover-view v-if="tabArr.length>1 && isCoverview" :class="isFixed?'flex alignCenter justConAround tabChange fixTop':'flex alignCenter justConAround tabChange'">
			<cover-view :class="activeTabIndex==index?'font16 bold activeTab tabOne':'font14 tabOne'" v-for="(item,index) in tabArr" :key="index" @click="changeTab(index,item)">{{item.title}}</cover-view>
		</cover-view>
		<cover-view class="tabChange" v-if="isFixed && isCoverview">
			<cover-view class="empty"></cover-view>
		</cover-view>
	</view>
</template>

<script>
	export default {
		name:"uni-tabchange",
		props:{
			tabArr:{
				type:Array,
				default:[]
			},
			activeTab:{
				type:[Number,String],
				default:0
			},
			isFixed:{
				type:Boolean,
				default:true
			},
			isCoverview:{
				type:Boolean,
				default:false
			}
		},
		watch:{
			activeTab: {
			    handler(newValue, oldValue) {
					this.activeTabIndex=newValue
			    },
			    deep: true,
			    immediate: true
			}
		},
		data() {
			return {
				activeTabIndex:''
			};
		},
		methods:{
			changeTab(idx,item){
				this.activeTabIndex=idx
				this.$emit('tabChangeSuccess',{activeTab:idx,itemInfo:item})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.tabChange{
	background: #fff;
	&>view{
		background: #fff;
		// padding: 20rpx 0;
		height: 80rpx;
		line-height: 80rpx;
		position:relative;
	}
	.empty,
	.tabOne{
		background: #fff;
		// padding: 20rpx 0;
		height: 80rpx;
		line-height: 80rpx;
		position:relative;
	}
	.redDot{
		position: absolute;
		width: 30rpx;
		height: 30rpx;
		right: -20rpx;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
		top:15rpx;
	}
}
.fixTop{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 20;
	/* #ifdef H5 */
	top:44px;
	/* #endif */
	box-shadow: 0 0 8rpx rgba(0, 0, 0, .15);
}
.activeTab::after{
	content: '';
	display:block;
	position:absolute;
	height: 8rpx;
	width: 100%;
	left:0;
	bottom: 0;
	background:$colorMain;
	border-radius: 20rpx;
	box-shadow: 0 6rpx 10rpx rgba(0, 0, 0, .15);
}
.empty{
	width:100%;
}
</style>